<template>
	<div>
		<Tabs>
			<TabPane label="编辑会员等级">
				<LayoutPhone title="会员中心">
					<Alert type="warning" show-icon>保存后小程序需要提交审核通过后方可生效；H5可立即生效。</Alert>
					<ui-box>
						<Form ref="form" :model="formData" label-position="top" :rules="rules">
							<FormItem>
								<div slot="label">等级名称  <span class="ui-text-gray">(请设置会员等级名称，可以是中文或英文)</span></div>
								<Input v-model="formData.name" style="width: 300px;" />
							</FormItem>
							<FormItem label="等级背景颜色">
								<SelectColors v-model="formData.color" :colors="colors"></SelectColors>
							</FormItem>
							<FormItem>
								<div slot="label">成长值要求  <span class="ui-text-gray">(请设置会员达到此等级所需的成长值，设为0则成为会员即达到等级要求)</span></div>
								<InputNumber style="width: 300px;" />
							</FormItem>
							<FormItem>
								<div slot="label">成长值比例  <span class="ui-text-gray">(请设置成长值比例，所设后此等级每消费一元可获得多少成长值)</span></div>
								<InputNumber style="width: 300px;" />
							</FormItem>
							<FormItem>
								<div slot="label">等级是否为付费等级   <span class="ui-text-gray">(如设置为付费等级，要获得此等级需要支付费用才可升级)</span></div>
								<RadioGroup>
					                <Radio label="male">免费升级</Radio>
					                <Radio label="female">付费升级</Radio>
					            </RadioGroup>
					            <InputNumber disabled placeholder="设置需支付的等级费用" style="width: 150px;" />
							</FormItem>
							<FormItem>
								<div slot="label">等级权益  <span class="ui-text-gray">(选填)</span></div>
								<CheckboxGroup>
					                <Checkbox label="免运费"></Checkbox>
					                <Checkbox label="订单折扣"></Checkbox>
					                <div style="display: inline-block; margin-right: 15px; width: 120px; vertical-align: middle;">
					                	<Input placeholder="填写数字">
									        <span slot="append">折</span>
									    </Input>
					                </div>
					                <Checkbox label="多倍积分"></Checkbox>
					                <div style="display: inline-block; width: 120px; vertical-align: middle;">
					                	<Input placeholder="填写数字">
									        <span slot="append">倍</span>
									    </Input>
					                </div>
					            </CheckboxGroup>
							</FormItem>
							<FormItem>
								<div slot="label">升级礼包  <span class="ui-text-gray">(选填)</span></div>
								<CheckboxGroup>
					                <Checkbox label="送积分"></Checkbox>
					                <div style="display: inline-block; margin-right: 15px; width: 120px; vertical-align: middle;">
					                	<Input placeholder="填写数字">
									        <span slot="append">分</span>
									    </Input>
					                </div>
					                <Checkbox label="送优惠券"></Checkbox>
					                <Button type="primary" style="margin-right: 15px;">重新选择</Button>
					                <Checkbox label="送赠品"></Checkbox>
					                <Button type="primary">选择赠品</Button>
					            </CheckboxGroup>
							</FormItem>
						</Form>
					</ui-box>
				</LayoutPhone>
			</TabPane>
		</Tabs>
		
		<FooterBar>
			<div style="text-align: center;">
				<Button @click="handleBack">返回列表</Button>
				<Button type="primary" :loading="committing" @click="handleSubmit">保存设置并启用</Button>
			</div>
		</FooterBar>
		
		<LoadingMask v-if="loading"></LoadingMask>
		
	</div>
</template>

<script>
import Util from '@/libs/util.js';
import LoadingMask from '@/components/LoadingMask.vue';
import LayoutPhone from '@/components/layout/phone.vue';
import SelectColors from '@/components/form/SelectColors.vue';
import FooterBar from '@/components/FooterBar.vue';
export default {
	components: {
		LoadingMask,
		LayoutPhone,
		SelectColors,
		FooterBar
	},
	data() {
		return {
			loading: false,
			committing: false,
			colors: ['#555555', '#e4393c', '#fd5f29', '#fd9226', '#fd577d', '#fbc42e', '#4e92df', '#69c3aa', '#1fb922', '#a67415', '#9b41cf'],
			discounts: [
				{label: '购物折扣', value: 1},
				{label: '免运费', value: 2}
			],
			formData: {
				id: null,
				name: '',
				enjoyservice: [],
				spendinglimit: 90,
				spendinglimit_type: 1,
				recommended_to_upgrade: 0,
				maxplayers: 0,
				spend_money: 0
			},
			rules: {
				name: [
					{required: true, message: "请填写等级名称", trigger: "blur"}
				]
			}
		}
	},
	mounted() {
		if(this.$route.query.id) {
			this.formData.id = this.$route.query.id;
			this.init();
		}
	},
	methods: {
		init() {
			this.loading = true;
			Util.ajax.post(this.API['API_MEMBER_GRADE_DETAIL'], {id: this.formData.id}).then(res => {
				this.loading = false;
				this.formData.name = res.name;
				this.formData.spendinglimit = res.spendinglimit;
				this.formData.spendinglimit_type = res.spendinglimit_type;
				this.formData.recommended_to_upgrade = res.recommended_to_upgrade;
				this.formData.maxplayers = res.maxplayers;
				this.formData.spend_money = Number(res.spend_money) || 0;
				if(res.enjoyservice == 0) {
					this.formData.enjoyservice = [];
				}else if(res.enjoyservice == 3) {
					this.formData.enjoyservice = this.discounts.map(item => {
						return item.value;
					})
				}else{
					this.formData.enjoyservice = [res.enjoyservice];
				}
			}).catch(() => {
				
			})
		},
		handleSubmit() {
			if(this.committing) return false;
			this.$refs.form.validate(valid => {
                if(valid) {
                	let form = this.formData;
                	let params = {
                		name: form.name,
						spendinglimit: form.spendinglimit,
						spendinglimit_type: form.spendinglimit_type,
						recommended_to_upgrade: form.recommended_to_upgrade,
						maxplayers: form.maxplayers,
						spend_money: form.spend_money
                	}
                	if(form.enjoyservice.length == 0) {
                		params.enjoyservice = 0;
                	}else if(form.enjoyservice.length == this.discounts.length){
                		params.enjoyservice = 3;
                	}else{
                		params.enjoyservice = form.enjoyservice[0];
                	}
                	this.committing = true;
                	if(form.id) {
                		params.id = form.id;
                		Util.ajax.post(this.API['API_MEMBER_GRADE_SAVE'], params).then((res) => {
	                		this.$Message.success({
	                			content: '编辑成功',
	                			onClose: () => {
	                				this.handleBack();
	                			}
	                		})
	                	}).catch(() => {
	                		this.committing = false;
	                	})
                	}else{
                		Util.ajax.post(this.API['API_MEMBER_GRADE_CREATE'], params).then((res) => {
	                		this.$Message.success({
	                			content: '添加成功',
	                			onClose: () => {
	                				this.handleBack();
	                			}
	                		})
	                	}).catch(() => {
	                		this.committing = false;
	                	})
                	}
                }
            });
		},
		// 返回列表
		handleBack() {
			this.$router.back();
		}
	}
}
</script>